<template>
  <div>
    <!-- 顶部导航栏 -->
    <div
      id="top-nav"
      class="flex secondly-color"
    >
      <!-- 左侧标题栏 这里用的绝对定位 基于中间-->
      <div
        class="h-full"
        id="title-box"
      >
        <OhVueIcon name="md-settingsapplications-round"></OhVueIcon>
        <div
          class="flex items-center justify-center text-base pl-1 ml-2 font-bold text-sm"
        >
          个人设置
        </div>
      </div>
      <!-- 右侧日夜栏  -->
      <div class="absolute right-4 h-full flex items-center justify-center">
        <!-- <OhVueIcon></OhVueIcon> -->
        <UniColorToggle></UniColorToggle>
      </div>
      <!-- 中间选项栏 -->
      <div
        class="uni-768-992-box relative h-full"
        style="height: 100%"
        id="action-box"
      >
        <el-tabs
          v-model="activeName"
          class="demo-tabs pl-3"
          @tab-click="onClickTabItemHandle"
        >
          <el-tab-pane
            label="主页"
            name="home"
          ></el-tab-pane>
          <el-tab-pane
            label="资料"
            name="profile"
          ></el-tab-pane>
          <el-tab-pane
            label="文章"
            name="article"
          ></el-tab-pane>
          <el-tab-pane
            label="资源"
            name="resource"
          ></el-tab-pane>
          <el-tab-pane
            label="设置"
            name="setting"
          ></el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 这一块就是显示用户信息的 -->
    <!-- 这里是有内边距的 p-4 -->
    <!-- userProfile 如果为null 则 布尔=false 反之 =true 这里取了两次反 !! 是为了将其转为布尔 -->
    <div
      id="userInfo-box"
      class="p-4 uni-768-992-box mt-2 uni-shadow secondly-color"
    >
      <!-- 没有资料时加载数据 -->
      <div v-show="!isLoadComplete">
        <div class="flex items-center justify-center gap-4">
          <div>
            <el-skeleton
              animated
              style="--el-skeleton-circle-size: 80px"
            >
              <template #template>
                <el-skeleton-item variant="circle" />
              </template>
            </el-skeleton>
          </div>
          <div style="flex: 1">
            <el-skeleton :rows="1"></el-skeleton>
          </div>
        </div>
      </div>
      <div
        v-show="isLoadComplete"
        class="flex w-h-full"
      >
        <!-- 左侧总容器 -->
        <div class="left flex-1 flex items-center ml-2">
          <!-- 左侧头像 -->
          <div class="aspect-square rounded-xl overflow-hidden h-2/3">
            <UniCosImage
              class="w-h-full"
              :format="CosImgFormatSuffix.WEBP"
              :src="userProfile?.avatarUrl ?? '#'"
            >
            </UniCosImage>
          </div>
          <!-- 左侧信息栏 -->
          <div class="flex flex-col justify-around ml-6 h-2/3">
            <div class="text-lg">{{ userProfile?.nickName }}</div>
            <div class="text-xs opacity-40">
              个人账号ID:{{ userProfile?.basicId }}
            </div>
          </div>
        </div>
        <!-- 右侧总容器 -->
        <div class="right flex-1 p-4 flex justify-end right-box items-end">
          <div
            style="flex: 1"
            class="h-full"
          ></div>

          <div
            class="actionText-box"
            @click="OnClickExit"
          >
            退出
          </div>
        </div>
      </div>
    </div>

    <div class="uni-768-992-box-noneBg mt-2">
      <div
        v-show="isLoadComplete"
        class="w-h-full"
      >
        <slot></slot>
      </div>
      <div
        v-show="!isLoadComplete"
        class="w-h-full secondly-color p-4"
      >
        <ElSkeleton
          animated
          :rows="8"
        ></ElSkeleton>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TabsPaneContext } from "element-plus";
import { OhVueIcon } from "oh-vue-icons";
import { IoPlayForward } from "oh-vue-icons/icons";
import { CosImgFormatSuffix, GetFormatImgCosUrl } from "~/models/cos";
import type { DataArrResponse, ResponseMsg } from "~/models/universal";
import type { UserProfileResponse } from "~/models/user";
const activeName = ref("profile");
const isLoadComplete = ref(false);
const route = useRoute();
// 如果没有登录 则调准至登录页面
const token = useCookie("token");
if (!token.value) navigateTo("/user/login");
// navigateTo("/user/");
if (route.path != "/user/") await navigateTo("/user/");
// 用户资料
const userProfile = useUserProfile();
// 因为是lazy懒请求，所以数据一开始是不存在的，也就userProfileResponse.data 是 = null
const userProfileResponse = await useLazyFetch<
  ResponseMsg<DataArrResponse<UserProfileResponse>>
>("/api/user/querySelfProfile", {
  headers: authHeaders(),
  key: "userProfileResponse",
});
// 监听用户资料变化
watch(userProfileResponse.data, (newVal, oldVal) => {
  if (newVal == null) return;
  if (!newVal?.status) {
    createSimpleElNotification(false, "获取用户资料失败");
    return;
  }
  createSimpleElNotification(true, "获取用户资料成功");
  userProfile.value = newVal?.data.rows[0] ?? null;
});

const OnClickExit = () => {
  token.value = null;
  userProfile.value = null;
  navigateTo("/");
};

const onClickTabItemHandle = async (pane: TabsPaneContext, ev: Event) => {
  switch (pane.paneName) {
    case "home":
      navigateTo("/");
      break;
    case "profile":
      navigateTo("/user/");
      break;
    case "article":
      navigateTo("/user/article");
      break;
    case "resource":
      navigateTo("/user/resource");
      break;
    case "setting":
      navigateTo("/user/setting");
      break;
  }
};

onMounted(async () => {
  await nextTick();
  isLoadComplete.value = true;
});
</script>

<style lang="scss" scoped>
#top-nav {
  height: clamp(30px, 5vmax, 40px);
  box-shadow: 0px 0.1px 2px 0.1px var(--color-20);
  backdrop-filter: blur(2px);
  margin-bottom: 1rem;
}

#title-box {
  width: calc((100vw - clamp(768px, 60vw, 992px)) / 2);
  display: none;

  @media (min-width: 1000px) {
    & {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 顶部导航栏中间的选项盒子
#action-box {
  // 主要是为了适配左侧占比
  @media (min-width: 1000px) {
    margin: 0;
  }
}

#userInfo-box {
  height: 120px;
}

.actionText-box {
  width: fit-content;
  height: fit-content;

  font-size: 1rem;
  transition: all 0.3s ease;
  opacity: 0.7;
  color: var(--color-error);

  &:hover {
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s ease;
  }
}

.right-box {
  position: relative;
}

:deep(.el-tabs__item) {
  color: var(--color-50);
  font-size: 0.75rem;
}

:deep(.el-tabs__item.is-active) {
  color: var(--color-secondly);
}

:deep(.el-tabs__active-bar.is-top) {
  background-color: var(--color);
}

:deep(.el-tabs__item:hover) {
  color: var(--color-secondly);
}
</style>
